<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery表单验证例子</title>
<link type="text/css" rel="stylesheet" media="screen" href="style/cmxform.css" />
<link type="text/css" rel="stylesheet" media="screen" href="style/reg.css" />
<!--[if lte IE 6]>
<link type="text/css" rel="stylesheet" media="screen" href="style/ie.css" />
<![endif]-->

<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/jquery.validate.js" charset="gb2312"></script>




<script type="text/javascript">
	$.validator.setDefaults({
		submitHandler: function() { alert("submitted!"); }
	});

	$().ready(function() {
		$("#secondform").validate({
			/*errorLabelContainer: "#messageBox",		//显示错误信息的容器ID
			wrapper: "li",								//包含每个错误信息的容器*/
			rules:{
				xmd:{
					required: true,
					minlength: 2,
					maxlength: 5
				},
				pwd:{
					required: true,
					minlength: 6
				},
				confirm_pwd:{
					required: true,
					equalTo: "#pwd"
				},
				f2csrq:{
					required: true,
					date: true
				},
				f2xjzd: {
					required: true
				},
				f2sfzh:{
					/*digits: true,
					rangelength: [18,20]*/
					required: true,
					isIdCardNo: true
				}
			},
			messages:{
				xmd:{
					required: "请填写姓名",
					minlength: "字符长度不能小于2个字符",
					maxlength: "字符长度不能大于5个字符"
				},
				pwd:{
					required: "请填写密码",
					minlength: "字符长度不能小于6个字符"
				},
				confirm_pwd:{
					required: "请再次输入密码",
					equalTo: "密码不一致"
				},
				f2csrq:{
					required: "请输入出生日期",
					date: "日期格式不正确(例：2009/04/07)"
				},
				f2xjzd:{
					required: "请输入地址"
				},
				f2sfzh:{
					/*digits: "身份证号码只能为数字",
					rangelength: "身份号码长度为18～20个字符"*/
					required: "请输入身份证号",
					isIdCardNo: "身份证号不正确"
				}
			}
		});
	});
</script>
</head>

<body>
<div id="header"></div>
<div id="main">


    
<form id="secondform">    
    <fieldset>
    	<legend>自定义jQuery验证</legend>
        <div id="xm" class="owinput">
			<div class="owlabel">
            	<label class="req" for="xm"> 姓  名 :</label>
            </div>
			<div class="owfield">
				<span class="inp"> <input name="xmd" type="text"> </span>
			</div>
        </div>
        
        <div id="xb" class="owinput">
			<div class="owlabel">
            	<label class="req" for="pwd"> 密  码 :</label>
            </div>
			<div class="owfield">
				<span class="inp"> <input id="pwd" name="pwd" type="text"> </span>
			</div>
        </div>
        
        <div id="xb" class="owinput">
			<div class="owlabel">
            	<label class="req" for="confirm_pwd"> 密码确认 :</label>
            </div>
            <div class="owfield">
				<span class="inp"> <input name="confirm_pwd" type="text"> </span>
			</div>
        </div>
        
        <div id="csrq" class="owinput">
			<div class="owlabel">
            	<label class="req" for="f2csrq"> 出生日期 :</label>
            </div>
			<div class="owfield">
				<span class="inp"> <input name="f2csrq" type="text"> </span>
			</div>
        </div>
        
        <div id="xjzd" class="owinput">
			<div class="owlabel">
            	<label class="req" for="f2xjzd"> 现居住地 :</label>
            </div>
			<div class="owfield">
				<span class="inp"> <input value="" name="f2xjzd" type="text"> </span>
			</div>
        </div>
        
        <div id="sfzh" class="owinput">
			<div class="owlabel">
            	<label class="req" for="f2sfzh"> 身份证号 :</label>
            </div>
			<div class="owfield">
				<span class="inp"> <input name="f2sfzh" type="text"> </span>
			</div>
        </div>   
    </fieldset>
    <div id="messageBox"></div>
    <div id="regSubmit">
        <span id="btnCreate" class="regBtn" onmouseover="btncreatehover(this);" onmouseout="btncreateout(this);">
            <b class="tl"><b class="tr"></b></b><button id="send" type="button">提  交</button><b class="bl"><b class="br"></b></b>
        </span>
        <span id="btnCancel" class="cancelBtn" onmouseover="btncancelhover(this);" onmouseout="btncancelout(this);">
            <b class="tl"><b class="tr"></b></b><button id="cancelBtn" type="button">取  消</button><b class="bl"><b class="br"></b></b>
        </span>
    </div>
</form>
</div>
<div id="footer"></div>
</body>
</html>
